<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-04 22:10:09
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-11 22:04:03
 * @FilePath: \kgantt\core\components\taskitem\milestone\milestone.vue
 * @Description: 
-->
<template>
  <g :tabindex="0" class="kgantt-milestoneWrapper">
    <rect
      :fill="getBarColor()"
      :x="task.x1"
      :width="task.height"
      :y="task.y"
      :height="task.height"
      :rx="task.barCornerRadius"
      :ry="task.barCornerRadius"
      :transform="transform"
      class="kgantt-milestoneBackground"
      @mousedown="onMouseDown"
    />
  </g>
</template>
<script lang="ts" setup>
import { onMounted, PropType, ref, watch } from "vue";
import { BarTask } from "../../../types/barTask";
const props = defineProps({
  task: {
    type: Object as PropType<BarTask>,
    default: {},
  },
  isProgressChangeable: {
    type: Boolean,
    default: false,
  },
  isDateChangeable: {
    type: Boolean,
    default: false,
  },
  isSelected: {
    type: Boolean,
    default: false,
  },
  rtl: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["onEventStart"]);

const transform = ref("");
const updateTransform = () => {
  transform.value = `rotate(45 ${props.task.x1 + props.task.height * 0.356} 
    ${props.task.y + props.task.height * 0.85})`;
};
const getBarColor = () => {
  return props.isSelected
    ? props.task.styles.backgroundSelectedColor
    : props.task.styles.backgroundColor;
};
const onMouseDown = (event: MouseEvent) => {
  props.isDateChangeable && emits("onEventStart", "move", props.task, event);
};
watch(
  () => props.task,
  () => {
    updateTransform();
  }
);
onMounted(() => {
  updateTransform();
});
</script>